<template>
  <div class="time-line">
    <div class="column-line"></div>
    <ul>
      <li v-for="item in directionsByYear" :key="item.year">
        <block :data="item"></block>
        <div class="line"></div>
      </li>
    </ul>
  </div>
</template>

<script>
import Block from '@/components/Block/TimeLineBlock';

export default {
  name: "TimeLine",
  props: {
    directionsByYear: Array
  },
  data() {
    return {
    };
  },
  computed: {

  },
  mounted() {

  },
  methods: {

  },
  components: {
    Block
  },
};
</script>

<style scoped lang="scss">
* {
  &::-webkit-scrollbar {
    width: 8px;
    height: 8px;
  }

  &::-webkit-scrollbar-thumb {
    border-radius: 8px;
    background-color: hsla(220, 4%, 58%, 0.3);
    transition: background-color 0.3s;

    &:hover {
      background: #bbb;
    }
  }

  &::-webkit-scrollbar-track {
    background: #ededed;
  }
}

.time-line {
  display: flex;
  padding: 10px;

  .column-line {
    border-radius: 5px;
    margin-left: 10px;
    width: 8px;
    background: teal;
  }
  >ul {
    list-style: none;
    >li {
      position: relative;
    }
    >li::before{
      content: '';
      position: absolute;
      top: 11px;
      left: 0;
      width: 0;
      height: 0;
      border-style: solid;
      border-width: 5px 0 5px 8px;
      border-color: transparent transparent transparent #008080;
    }
  }
}
</style>
